<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全屏轮播图</title>
		<style>
			.body {
				margin: 0;
				padding: 0;
				background-color: #27a5b3;
				font-family: Arial, sans-serif;
				
			}

			.carousel {
				position: relative;
				width: 100%;
				height: 100vh;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.carousel-item {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100vh;
				opacity: 0;
				transition: opacity 1s linear;
				background-repeat: no-repeat;
			}

			.carousel-item.active {
				opacity: 1;
			}

			.carousel-text {
				position: absolute;
				left: 50%;
				top: 30%;
				transform: translateX(-50%);
				width: 80%;
				padding: 20px;
				background-color: rgba(0, 0, 0, 0.6);
				color: #fff;
				text-align: center;
				font-size: 2.5rem;
				border-radius: 10px;
			}

			.carousel-nav {
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 99;
			}

			.carousel-nav button {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				border: none;
				margin: 0 10px;
				background-color: #fff;
				cursor: pointer;
				transition: all 0.3s ease;
			}

			.carousel-nav button.active {
				width: 20px;
				background-color: hsl(214, 100%, 60%);

			}
		</style>
	</head>
	<body>
		<!-- 219970111雷德亮 -->
		<div class="carousel">
			<div class="carousel-item active"
				style="background-image: url('./img/3.jpg'); background-size: 100% auto;">
				<div class="carousel-text">Picture 1</div>
			</div>
			<div class="carousel-item" style="background-image: url('./img/4.jpg'); background-size: 100% auto;">
				<div class="carousel-text">Picture 2</div>
			</div>
			<div class="carousel-item" style="background-image: url('./img/1.jpg'); background-size: 100% auto;">
				<div class="carousel-text">Picture 3</div>
			</div>
			<div class="carousel-item" style="background-image: url('./img/2.jpg'); background-size: 100% auto;">
				<div class="carousel-text">Picture 4</div>
			</div>
			<div class="carousel-nav">
				<button class="active"></button>
				<button></button>
				<button></button>
				<button></button>
			</div>
		</div>

		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script>
		$(document).ready(function() {
		  
		  var items = $('.carousel-item');
		  var points = $('.carousel-nav button');
		
		  
		  function carousel() {
		    
		    var activeItem = $('.carousel-item.active');
		   
		    var nextItem = activeItem.next();
		
		    
		    if (!nextItem.length) {
		      nextItem = items.first();
		    }
		
		    
		    activeItem.removeClass('active');
		    nextItem.addClass('active');
		    points.eq(nextItem.index()).addClass('active').siblings().removeClass('active');
		  }
		
		  
		  var timer = setInterval(carousel, 2000);
		
		
		  $('.carousel').hover(function() {
		    clearInterval(timer);
		  }, function() {
		    timer = setInterval(carousel, 3000);
		  });
		
		  
		  points.click(function() {
		    var index = $(this).index();
		    var activeItem = $('.carousel-item.active');
		    var nextItem = items.eq(index);
		
		    if (activeItem.index() == nextItem.index()) {
		      return;
		    }
		
		    activeItem.removeClass('active');
		    nextItem.addClass('active');
		    points.eq(nextItem.index()).addClass('active').siblings().removeClass('active');
		  });
		});
		</script>
	</body>
</html>
    </body>
</html>